<!DOCTYPE HTML>
<html>
<head>
    <base href="localhost://localhost:8080/">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>My WebSocket</title>
</head>

<body>

<div style="text-align: center">
    <h1>Web Socket index 123</h1>
    <textarea id="text" cols="50" rows="5"></textarea>
    <br/><br>
    <button onclick="connect()">建立连接</button>
    <button onclick="send()">发送消息</button>
    <button onclick="closeWebSocket()">关闭连接</button>
    <br><br>
    <textarea id="message" readonly cols="50" rows="20"></textarea>
</div>

</body>

<script type="text/javascript">
    var websocket = null;
    var token = 123;
    //判断当前浏览器是否支持WebSocketindex.html
    function connect() {
        if ('WebSocket' in window) {
            websocket = new WebSocket("ws://localhost:8080/websocket/123");

            //连接发生错误的回调方法
            websocket.onerror = function (event) {

                console.log(event);
            };

            //连接成功建立的回调方法
            websocket.onopen = function (event) {
                websocket.open(token);
            };

            //接收到消息的回调方法
            websocket.onmessage = function (event) {
                setMessageInnerHTML(event.data);
            };

            //连接关闭的回调方法
            websocket.onclose = function () {
                setMessageInnerHTML("close");
            };

            //监听窗口关闭事件，当窗口关闭时，主动去关闭websocket连接，防止连接还没断开就关闭窗口，server端会抛异常。
            window.onbeforeunload = function () {
                websocket.close();
            };
        }
        else {
            alert('Not support websocket')
        }
    }

    //将消息显示在网页上
    function setMessageInnerHTML(innerHTML) {
        document.getElementById('message').value += innerHTML + '\n';
    }

    //关闭连接
    function closeWebSocket() {
        websocket.close();
    }

    //发送消息
    function send() {
        var message = document.getElementById('text').value;
        message = JSON.parse(message);
        websocket.send(message);
        document.getElementById('text').value = '';
    }
</script>
</html>